<!DOCTYPE html>
<html>
<head>
    <title>Resonance Tube Experiment</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="400" height="600"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Set common drawing styles
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.lineCap = 'round';

        ctx.beginPath();

        // 1. Draw the Tuning Fork
        // The tuning fork is stylized. It's drawn as two prongs with a U-bend.
        const forkXStart = 140;
        const forkXEnd = 240;
        const forkYTop = 70;
        const forkYBottom = 90;
        const forkYCenter = (forkYTop + forkYBottom) / 2;
        const forkRadius = (forkYBottom - forkYTop) / 2;

        // Top prong
        ctx.moveTo(forkXStart, forkYTop);
        ctx.lineTo(forkXEnd, forkYTop);
        // U-bend
        ctx.arc(forkXEnd, forkYCenter, forkRadius, -Math.PI / 2, Math.PI / 2);
        // Bottom prong
        ctx.lineTo(forkXStart, forkYBottom);
        
        // Stem
        const stemXStart = forkXEnd + forkRadius;
        const stemXEnd = 320;
        ctx.moveTo(stemXStart, forkYCenter);
        ctx.lineTo(stemXEnd, forkYCenter);
        
        
        // 2. Draw the Resonance Tube
        const tubeWidth = 80;
        const tubeCenterX = 200;
        const tubeLeft = tubeCenterX - tubeWidth / 2;
        const tubeRight = tubeCenterX + tubeWidth / 2;
        const tubeTop = 120;
        const tubeBottom = 500;

        // Left wall
        ctx.moveTo(tubeLeft, tubeTop);
        ctx.lineTo(tubeLeft, tubeBottom);
        // Right wall
        ctx.moveTo(tubeRight, tubeTop);
        ctx.lineTo(tubeRight, tubeBottom);
        // Bottom of the tube
        ctx.moveTo(tubeLeft, tubeBottom);
        ctx.lineTo(tubeRight, tubeBottom);
        
        // 3. Draw the water in the tube
        const waterLevelY = 250;
        
        // Water surface
        ctx.moveTo(tubeLeft, waterLevelY);
        ctx.lineTo(tubeRight, waterLevelY);
        
        // Dashed lines to indicate water
        const dashSpacing = 20;
        for (let y = waterLevelY + dashSpacing; y < tubeBottom; y += dashSpacing) {
            // Draw a pattern of two short lines with a gap in the middle
            ctx.moveTo(tubeLeft + 5, y);
            ctx.lineTo(tubeCenterX - 10, y);
            ctx.moveTo(tubeCenterX + 10, y);
            ctx.lineTo(tubeRight - 5, y);
        }

        // Apply all the line drawings
        ctx.stroke();

        // 4. Draw the label
        ctx.fillStyle = 'black';
        ctx.font = "24px 'SimSun', 'STSong', serif";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('力图 7.39.1', tubeCenterX, tubeBottom + 30);

    </script>
</body>
</html>